<template>
  <div id="product"
       v-show="title === 'Viewing Product'">
    <el-card class="wrap">
      <div class="left">
        <div class="main-img">
          <el-card>
            <img :src="coverImg"
                 alt="">
          </el-card>
        </div>
        <div class="imgs">
          <el-card v-for="item in imgs"
                   :key="'img' + item.id">
            <img :src="item.url"
                 alt="">
          </el-card>
        </div>
      </div>
      <div class="right">
        <div class="content">
          <div class="header">
            <div class="fl">
              <p class="desc">{{activeItem.brand}}&nbsp;{{activeItem.type}}&nbsp;</p>
              <p class="from">Retailer: {{activeItem.retailer}}</p>
              <p class="brand">Brand: {{activeItem.brand}}</p>
            </div>
            <div class="fr" v-if="activeItem && activeItem.price">
              <p class="usd"
                 :class="{price: currency ===1}">USD: $ {{ activeItem.price.USD }}</p>
              <p class="hkd"
                 :class="{price: currency ===2}">HKD: $ {{ activeItem.price.HKD}}</p>
              <p class="cny"
                 :class="{price: currency ===3}">CNY: ￥ {{ activeItem.price.CNY}}</p>
              <p class="jpy"
                 :class="{price: currency ===4}">JPY: ￥ {{ activeItem.price.JPY}}</p>
              <p class="eur"
                 :class="{price: currency ===5}">EUR: € {{ activeItem.price.EUR}}</p>
            </div>
          </div>
          <div class="base-information">
            <el-row>
              <el-col :span="16">
                <div class="rl">
                  <p class="retailer">
                    <span class="key">Retailer&nbsp;Product&nbsp;ID:&nbsp;</span>
                    <a class="value"
                       :href="activeItem.source_url"
                       target="__blank"
                       v-if="activeItem.source_url">{{activeItem.retailerProductId}}</a>
                    <span v-else
                          class="value">{{activeItem.retailerProductId}}</span>
                  </p>
                  <p>
                    <span class="key">Region:&nbsp;</span>
                    <span class="value">{{activeItem.region}}</span>
                  </p>
                  <p>
                    <span class="key">Discounted:&nbsp;</span>
                    <span class="value">NO</span>
                  </p>
                  <p>
                    <span class="key">Conditions:&nbsp;</span>
                    <span class="value">{{activeItem.condition_desc}}</span>
                  </p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="rr">
                  <p>
                    <span class="key">Color:&nbsp;</span>
                    <span class="value">{{activeItem.color}}</span>
                  </p>
                  <p>
                    <span class="key">Type:&nbsp;</span>
                    <span class="value">{{activeItem.type}}</span>
                  </p>
                  <p>
                    <span class="key">Material:&nbsp;</span>
                    <span class="value">{{activeItem.material ? activeItem.material.split('/')[0] : ""}}</span>
                  </p>
                  <p>
                    <span class="key">Updated:&nbsp;</span>
                    <span class="value">{{activeItem.updated_at}}</span>
                  </p>
                </div>
              </el-col>
            </el-row>

          </div>
          <div class="priceIndex">
            <div class="select-wrap">
              <el-select v-model="price_group"
                         @change="priceGroupChange"
                         placeholder="请选择">
                <el-option v-for="item in options"
                           :key="item.id"
                           :label="item.label"
                           :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="title">Pricing</div>
            <div id="priceIndex"
                 v-if="dataShow"></div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { lineOption, lineSerie } from "@/echart/echart-option";
import { fixPercent, timeTransform } from "@/util/tool";

export default {
  data() {
    return {
      imgs: [],
      activeItem: {},
      options: [{ label: "Retailer", id: 0 }, { label: "Country", id: 1 }],
      price_group: 0,
      dataShow: false,
      coverImg: ""
    };
  },
  created() {
    for (let i = 1; i < 5; i++) {
      this.imgs.push({
        url: "",
        show: true,
        id: i
      });
    }
  },
  filters: {
    cny(val) {
      return fixPercent(val * 6.314);
    },
    jpy(val) {
      return fixPercent(val * 105.84);
    },
    eur(val) {
      return fixPercent(val * 0.8079);
    },
    hkd(val) {
      return fixPercent(val * 7.8417);
    }
  },
  computed: {
    ...mapGetters([
      "chartShow",
      "imgUrl",
      "totalProducts",
      "productOrList",
      "title",
      "productId",
      "goodsId",
      "currency"
    ])
  },
  methods: {
    getDetail() {
      this.dataShow = false;
      this.imgs.forEach((item, index) => {
        item.url = this.imgUrl + this.productId + "/" + (index + 1) + ".jpg";
        item.show = true;
      });
      this.$http
        .get("goods/" + this.goodsId + `?price_group=${this.price_group}`)
        .then(res => {
          this.dataShow = true;
          this.coverImg = this.imgUrl + this.productId + "/1.jpg";
          this.$nextTick(() => {
            let time_arr = timeTransform(res.time_range);
            this.activeItem = res;
            dd(res);
            let chart = this.$echarts.init(
              document.getElementById("priceIndex")
            );
            let sameInfoGoods = res.same_info_goods;
            let serie_arr = [];
            let legendArr = sameInfoGoods.map(item => item.name);
            let min;
            let max;
            if (sameInfoGoods.length && sameInfoGoods[0].price_history.length) {
              min = sameInfoGoods[0].price_history[0].avg_price;
              max = sameInfoGoods[0].price_history[0].avg_price;
            }
            sameInfoGoods.forEach(item => {
              let price_history = item.price_history;
              let name = item.name;
              let avg_arr = price_history.map(item =>
                fixPercent(item.avg_price)
              );
              avg_arr.forEach(item => {
                if (item > max) {
                  max = item;
                } else if (item < min) {
                  min = item;
                }
              });
              serie_arr.push(new lineSerie(name, avg_arr));
            });
            dd(min, max);
            let line = new lineOption(time_arr, serie_arr, legendArr, min, max);
            chart.setOption(line);
          });
        });
    },
    priceGroupChange() {
      this.dataShow = false;
      this.getDetail();
    }
  },
  watch: {
    title(newVal, oldVal) {
      if (newVal === "Viewing Product") {
        this.getDetail();
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../../assets/styles/color.scss";
@import "../../../assets/styles/mixins.scss";

#product {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1001;
  overflow: hidden;
  background-color: $bgColor;
  margin-left: 64px;
  margin-top: 50px;
  padding: 1rem;
  .el-card {
    box-sizing: border-box;
    background-color: #fff;
    &.wrap {
      overflow: hidden;
    }
  }
  .left {
    box-sizing: border-box;
    width: 20rem;
    float: left;
    margin-right: 1.5rem;
    .main-img {
      width: 20rem;
      margin-left: 0.5rem;
      // margin-top: 0.5rem;
      box-sizing: border-box;
      .el-card__body {
        padding: 0;
        img {
          width: 20rem;
          height: 20rem;
        }
      }
    }
    .imgs {
      width: 20rem;
      margin-left: 0.5rem;
      margin-right: 1rem;
      .el-card {
        .el-card__body {
          padding: 0;
        }
        &:nth-child(odd) {
          margin-right: 0.5rem;
        }
        img {
          width: 9.5rem;
          height: 9.5rem;
        }
        box-sizing: border-box;
        display: inline-block;
        // width: 10.25rem;
        // height: 10.25rem;
        padding: 0;
        margin-top: 0.5rem;
      }
    }
  }
  .right {
    overflow: hidden;
    .header {
      @include clearfix();
      padding: 0 2rem;
      font-size: 0.9rem;
      color: #333333;
      border-bottom: 1px solid $grayLine;
      .fl {
        text-align: left;
        margin-top: 0.8rem;
        .desc {
          font-size: 1.2rem;
          color: #1a1a1a;
        }
      }
      .fr {
        text-align: right;
        .price {
          font-size: 1rem;
          color: $base;
          font-family: "Georgia";
        }
      }
    }
    .base-information {
      padding: 0 2rem;
      border-bottom: 1px solid $grayLine;
      height: 10.5rem;
      box-sizing: padding-box;
      text-align: left;
      .img-wrap {
        text-align: center;
        img {
          margin-top: 1rem;
          height: 7.5rem;
          width: 7.5rem;
        }
      }
      .el-col-12 {
        margin-top: 1rem;
      }
      .key {
        color: #666666;
      }
      .value {
        color: #333333;
      }
    }
    .priceIndex {
      padding-left: 2rem;
      padding-top: 1rem;
      margin-bottom: 1rem;
      .select-wrap {
        z-index: 2000;
        position: absolute;
        right: 50px;
      }
      .title {
        text-align: left;
        font-size: 20px;
      }
      #priceIndex {
        height: 20rem;
      }
    }
  }
  .retailer {
    a {
      color: $base !important;
      text-decoration: underline $base;
      cursor: pointer;
    }
  }
}
</style>
